<script setup>
import {ref} from "vue";

const typeData = ref([ "合作实验室", "仪器", "服务客户"])
const typeName = ref("合作实验室")
const setTypeName = (data) => {
  typeName.value = data;
}
</script>

<template>
  <div class="tab certBox text-24px wid wow animate__fadeInUp animate__animated" data-wow-delay="0s" data-wow-duration="1s"
       style="visibility: visible; animation-duration: 1s; animation-delay: 0s;">
    <div class="tab">
      <ul>
        <li v-for="item of typeData" @click="setTypeName(item)" :class="typeName===item?'cur':''">{{ item }}</li>
      </ul>
    </div>
    <div class="p-t-20px" v-if="typeName==='合作实验室'">
      <img src="../../assets/cert_1.jpg"  class="w-1/1" alt="">
    </div>
    <div class="p-t-20px" v-if="typeName==='仪器'">
      <img src="../../assets/cert_2.jpg"  class="w-1/1" alt="">
    </div>
    <div class="p-t-20px" v-if="typeName==='服务客户'">
      <img src="../../assets/cert_3.jpg"  class="w-1/1" alt="">
    </div>
  </div>
</template>

<style scoped lang="less">

.certBox { padding: 3.5em 0 5.3em;}

.certBox .tab ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; font-weight: bold; color: #929292;}

.certBox .tab ul li { margin-right: 1.6em; cursor: pointer;}

.certBox .tab ul li.cur { color: #202c5c;}

.certBox .conDZ { margin-top: 2.2em;}

.certBox .conD {display: none;}

.certBox .conD:first-child {display: block;}

.certBox .conD img { display: block; margin: 0 auto; max-width: 100%; height: auto;}

</style>
